/**
 * 泛娱区块链 - Mine
 * @zaric
 * 我的收藏
 */


'use strict';
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, TouchableHighlight, Image } from 'react-native'
import NavigationBar from '../../component/navigation/NavigationBar'
import ListView from '../../component/list/ListView';
import ImageView from '../../component/common/ImageView';
import {diffTime} from "../../util/Tool";

class MyCollection extends React.Component {

    constructor(props) {
        super(props);
        this.params = this.props.navigation.state.params;
        this.state = { dataSource: [] };
        this.page = 1
    }

    componentDidMount() {
        this.requestDataSources();
    }

    componentWillMount() {
        this.params.onCallBack && this.params.onCallBack();
    }

    requestDataSources = async () => {
        const limit = 10;
        let url = ServicesApi.COLLECT_LIST;
        let data = {
            limit,
            page: this.page,
            create_user: global.secretKey,
        };
        const result = await Services.post(url,data);
        // console.log('我的收藏----------->',result);
        if (result.code === 0) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length !== 0) {
                let oldData = this.state.dataSource.slice();
                oldData = oldData.concat(result.data);
                this.setState({ dataSource: oldData })
            }
        }
        this._listViewRef && this._listViewRef.stopRefresh();
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit })
    };
    _onPressItem = (item, index) => {
        if (item.article_type==='2'){ //视频
            RouterHelper.navigate('','VideoDetail',{information_id: item.information_id})
        } else { //文章
            RouterHelper.navigate(item.information_title, 'ArticleDetails', {information_id: item.information_id});
        }
    };

    _onRefresh = (stopRefresh) => {
        this.page = 1;
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++;
        this.requestDataSources()
    };

    _renderItem = ({ item, index }) => {
        const width = SCREEN_WIDTH * 0.28;
        const height = width * 0.667;
        return (
            // <TouchableOpacity
            //     activeOpacity={1}
            //     style={styles.itemContainer}
            //     onPress={() => { this._onPressItem(item, index) }}
            // >
            <TouchableOpacity
                onPress={() => this._onPressItem(item,index)}
                activeOpacity={1}
                style={styles.itemContainer}>
                <View style={styles.content}>
                    <View style={styles.itemInfoCon}>
                        <Text style={styles.titleText}>{item.information_title}</Text>
                        <View style={styles.bottomInfo}>
                            <Text style={styles.itemTime}>{diffTime(item.create_time)}</Text>
                            <Text style={styles.itemBottomName}>{item.author_name}</Text>
                        </View>
                    </View>
                    <View style={[Theme.CCC]}>
                        <ImageView
                            resizeMode={'cover'}
                            style={[styles.image,{width,height}]}
                            source={item.cover_url ? {uri: item.cover_url} : Images.img_shop_default}
                        />
                        {item.article_type > 1 && <ImageView
                            tintColor={'#fff'}
                            resizeMode={'contain'}
                            style={[styles.iconVideoPlay]}
                            source={Images.icon_video_play}
                        />}
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };

    _renderItemSeparator = (info) => {
        return (
            <View style={styles.sep} />
        )
    };


    _deleteItem = async (item,index) => {
        // console.log('取消收藏');
        const data = {
            create_user: global.secretKey,
            collect_id: item.collect_id,
        };
        const result = await Services.post(ServicesApi.COLLECT_DEL,data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            this.params.onCallBack && this.params.onCallBack();
            ToastManager.show('取消收藏成功!');
            let temp = this.state.dataSource.slice();
            temp.splice(index,1);
            this.setState({dataSource:temp})
        }
    };

    _getQuickActions = ({item,index}) => {
        return <View style={styles.quickAContent}>
            <TouchableHighlight
                onPress={() => this._deleteItem(item,index)}
            >
                <View style={styles.quick}>
                    <Text style={styles.delete}>删除</Text>
                </View>
            </TouchableHighlight>
        </View>

    };

    render() {
        const { dataSource } = this.state
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'收藏'}
                />
                <ListView
                    listType={'SwipeableFlatList'}
                    ref={this._captureRef}
                    data={dataSource}
                    style={styles.listView}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                    onEndReached={this._onEndReached}
                    onRefresh={this._onRefresh}
                    ItemSeparatorComponent={this._renderItemSeparator}
                    getQuickActions={this._getQuickActions} // 菜单列表
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    itemContainer: {
        alignItems: 'center',
        flexDirection: 'column',
        backgroundColor: '#fff',
    },
    listView: {
        flex: 1,
    },
    cutLine: {
        width: Theme.screenWidth,
        height: Theme.minPixel,
        backgroundColor: '#f4f4f4',
    },
    content: {
        flexDirection: 'row',
        justifyContent: 'center',
        // backgroundColor: "#9f1f1f"
    },
    itemInfoCon: {
        flex: 1,
        marginTop: 13,
        marginBottom: 13,
        marginRight: 46,
        marginLeft: 15,
        justifyContent: 'space-between',
    },
    titleText: {
        fontSize: FontSize(12),
        color: "#4a4a4a"
    },
    bottomInfo: {
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'center',
    },
    itemTime: {
        fontSize: FontSize(10),
        color: "#929292"
    },
    itemBottomName: {
        fontSize: FontSize(10),
        color: "#929292",
        // height: 60,
    },
    videoName: {
        width: 55,
        fontSize: FontSize(11),
        color: "#4a4a4a"
    },
    image: {
        marginTop: 13,
        marginBottom: 13,
        marginRight: 10,
        borderRadius: 5,
    },
    iconVideoPlay: {
        position: 'absolute',
    },
    //侧滑菜单的样式
    quickAContent: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    quick: {
        flex: 1,
        width: 59,
        backgroundColor: "#ff3c32",
        alignItems: 'flex-end',//水平靠右
        justifyContent: 'center',//上下居中
        // elevation: 5,//漂浮的效果

    },
    delete: {
        color: "#ffffff",
        marginRight: 12
    },
    sep: {
        height: Theme.minPixel,
        backgroundColor: '#f5f5f5',
        marginLeft: 15,
        marginRight: 15,
    },
});

export default MyCollection